import { InputNumber, Modal, Icon } from 'antd';
import isEmpty from 'lodash/isEmpty';
import isArray from 'lodash/isArray';
import { WeaDatePicker, WeaSelect } from 'ecCom';
import equals from 'deep-equal';

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      monthValue: '',
      dayValue: '',
    };
    if (!isEmpty(props.value)) {
      if (props.value[0]) this.state.monthValue = props.value[0];
      if (props.value[1]) this.state.dayValue = props.value[1];
    }
  }
  componentWillReceiveProps(nextProps) {
    if (!equals(this.props.value, nextProps.value)) {
      let monthValue = '',
        dayValue = '';
      if (!isEmpty(nextProps.value)) {
        monthValue = nextProps.value[0];
        dayValue = nextProps.value[1];
      }
      this.setState({ monthValue, dayValue });
    }
  }
  createMonth() {
    const monthOptions = [];
    const nowMonth = new Date().getMonth() + 1;
    for (let i = 1; i < 13; i++) {
      monthOptions.push({
        key: i < 10 ? `0${i}` : i,
        selected: nowMonth == i,
        showname: i < 10 ? `0${i}月` : `${i}月`,
      });
    }
    return monthOptions;
  }
  createDate() {
    const dateOptions = [];
    for (let i = 1; i < 32; i++) {
      dateOptions.push({
        key: i < 10 ? `0${i}` : i,
        selected: false,
        showname: i < 10 ? `0${i}` : i,
      });
    }
    dateOptions.unshift({ key: '', selected: true, showname: '' });
    return dateOptions;
  }
  onChangeMonth(value) {
    this.setState({ monthValue: value });
    const { dayValue = '' } = this.state;
    this.props.onChange && this.props.onChange([value, dayValue]);
  }
  onChangeDay(value) {
    this.setState({ dayValue: value });
    const { monthValue = '' } = this.state;
    this.props.onChange && this.props.onChange([monthValue, value]);
  }

  render() {
    const { monthValue, dayValue } = this.state;
    const { viewAttr, otherParams } = this.props;
    const nowMonth = new Date().getMonth() + 1;
    return (
      <div className="prj-date-time">
        <div style={{ width: 120, display: 'inline-block' }}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@olarp2`} options={this.createMonth()} value={monthValue || nowMonth} onChange={this.onChangeMonth.bind(this)} style={{ width: 120 }} />
        </div>
        <div style={{ width: 120, display: 'inline-block', marginLeft: 10 }}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@be0eph`} options={this.createDate()} value={dayValue} onChange={this.onChangeDay.bind(this)} style={{ width: 120 }} />
        </div>
      </div>
    ); 1;
  }
}

export default Main;
